<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>房贷计算器API测试工具</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        h1, h2 {
            color: #333;
        }
        .container {
            display: flex;
            flex-wrap: wrap;
        }
        .left-panel {
            flex: 1;
            min-width: 300px;
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            margin-right: 20px;
        }
        .right-panel {
            flex: 2;
            min-width: 300px;
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="text"], input[type="number"], select, textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 15px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 14px;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 10px;
        }
        button:hover {
            background-color: #45a049;
        }
        pre {
            background-color: #f8f8f8;
            padding: 15px;
            border-radius: 5px;
            overflow: auto;
            max-height: 500px;
            border: 1px solid #ddd;
        }
        .api-list {
            list-style-type: none;
            padding: 0;
        }
        .api-list li {
            padding: 10px;
            margin-bottom: 5px;
            background-color: #f0f0f0;
            border-radius: 4px;
            cursor: pointer;
        }
        .api-list li:hover {
            background-color: #e0e0e0;
        }
        .api-list li.active {
            background-color: #4CAF50;
            color: white;
        }
    </style>
</head>
<body>
    <h1>房贷计算器API测试工具</h1>
    
    <div class="container">
        <div class="left-panel">
            <h2>API列表</h2>
            <ul class="api-list" id="apiList">
                <li data-api="user/login" data-method="POST">用户登录/注册</li>
                <li data-api="user/info" data-method="GET">获取用户信息</li>
                <li data-api="user/update" data-method="PUT">更新用户信息</li>
                <li data-api="loan/calculate" data-method="POST">贷款计算</li>
                <li data-api="loan/rate-options" data-method="GET">获取默认利率选项</li>
                <li data-api="history/save" data-method="POST">保存计算记录</li>
                <li data-api="history/list" data-method="GET">获取历史记录列表</li>
                <li data-api="history/detail/{recordId}" data-method="GET">获取历史记录详情</li>
                <li data-api="history/delete/{recordId}" data-method="DELETE">删除历史记录</li>
                <li data-api="history/clear" data-method="DELETE">清空历史记录</li>
                <li data-api="comparison/create" data-method="POST">创建贷款对比</li>
                <li data-api="comparison/detail/{comparisonId}" data-method="GET">获取对比结果</li>
            </ul>
            
            <div class="form-group">
                <label for="token">Token:</label>
                <input type="text" id="token" placeholder="登录后获取的token">
            </div>
            
            <div class="form-group">
                <label for="baseUrl">API基础URL:</label>
                <input type="text" id="baseUrl" value="http://localhost/v1/" placeholder="例如: http://example.com/v1/">
            </div>
        </div>
        
        <div class="right-panel">
            <h2 id="apiTitle">选择左侧API进行测试</h2>
            
            <div class="form-group">
                <label for="apiUrl">API URL:</label>
                <input type="text" id="apiUrl" readonly>
            </div>
            
            <div class="form-group">
                <label for="apiMethod">请求方法:</label>
                <input type="text" id="apiMethod" readonly>
            </div>
            
            <div class="form-group">
                <label for="requestParams">请求参数 (JSON格式):</label>
                <textarea id="requestParams" rows="10"></textarea>
            </div>
            
            <button id="sendRequest">发送请求</button>
            
            <h3>响应结果:</h3>
            <pre id="responseResult">// 响应结果将显示在这里</pre>
        </div>
    </div>
    
    <script>
        // API模板
        const apiTemplates = {
            'user/login': {
                method: 'POST',
                params: {
                    code: '微信登录code',
                    userInfo: {
                        nickName: '用户昵称',
                        avatarUrl: '头像URL'
                    }
                }
            },
            'user/info': {
                method: 'GET',
                params: {}
            },
            'user/update': {
                method: 'PUT',
                params: {
                    nickName: '新昵称',
                    avatarUrl: '新头像URL'
                }
            },
            'loan/calculate': {
                method: 'POST',
                params: {
                    type: 'commercial',
                    repaymentType: 'equal',
                    years: 20,
                    amount: 100,
                    rate: 3.8,
                    basisPoints: 0
                }
            },
            'loan/rate-options': {
                method: 'GET',
                params: {}
            },
            'history/save': {
                method: 'POST',
                params: {
                    params: {
                        type: 'commercial',
                        repaymentType: 'equal',
                        years: 20,
                        amount: 100,
                        rate: 3.8
                    },
                    results: {
                        loanType: 'commercial',
                        repaymentType: 'equal',
                        years: 20,
                        totalAmount: 100,
                        amount: 100,
                        rate: 3.8,
                        adjustedRate: 3.8,
                        equalResult: {
                            totalLoan: 1000000,
                            totalRepayment: 1456783.25,
                            totalInterest: 456783.25,
                            monthlyPayment: 6069.93
                        }
                    }
                }
            },
            'history/list': {
                method: 'GET',
                params: {
                    page: 1,
                    pageSize: 10
                }
            },
            'history/detail/{recordId}': {
                method: 'GET',
                params: {
                    recordId: 1
                }
            },
            'history/delete/{recordId}': {
                method: 'DELETE',
                params: {
                    recordId: 1
                }
            },
            'history/clear': {
                method: 'DELETE',
                params: {}
            },
            'comparison/create': {
                method: 'POST',
                params: {
                    record1Id: 1,
                    record2Id: 2
                }
            },
            'comparison/detail/{comparisonId}': {
                method: 'GET',
                params: {
                    comparisonId: 1
                }
            }
        };
        
        // 获取DOM元素
        const apiList = document.getElementById('apiList');
        const apiTitle = document.getElementById('apiTitle');
        const apiUrl = document.getElementById('apiUrl');
        const apiMethod = document.getElementById('apiMethod');
        const requestParams = document.getElementById('requestParams');
        const sendRequest = document.getElementById('sendRequest');
        const responseResult = document.getElementById('responseResult');
        const token = document.getElementById('token');
        const baseUrl = document.getElementById('baseUrl');
        
        // 初始化API列表点击事件
        apiList.addEventListener('click', function(e) {
            if (e.target.tagName === 'LI') {
                // 移除所有active类
                const items = apiList.getElementsByTagName('li');
                for (let i = 0; i < items.length; i++) {
                    items[i].classList.remove('active');
                }
                
                // 添加active类到当前点击的项
                e.target.classList.add('active');
                
                // 获取API信息
                const apiPath = e.target.getAttribute('data-api');
                const method = e.target.getAttribute('data-method');
                
                // 设置API信息
                apiTitle.textContent = e.target.textContent;
                apiUrl.value = apiPath;
                apiMethod.value = method;
                
                // 设置请求参数模板
                if (apiTemplates[apiPath]) {
                    requestParams.value = JSON.stringify(apiTemplates[apiPath].params, null, 2);
                } else {
                    requestParams.value = '{}';
                }
            }
        });
        
        // 发送请求
        sendRequest.addEventListener('click', function() {
            // 获取当前API信息
            const apiPath = apiUrl.value;
            const method = apiMethod.value;
            let url = baseUrl.value + apiPath;
            
            // 解析请求参数
            let params;
            try {
                params = JSON.parse(requestParams.value);
            } catch (e) {
                responseResult.textContent = '请求参数JSON格式错误: ' + e.message;
                return;
            }
            
            // 处理URL中的参数
            if (apiPath.includes('{')) {
                const matches = apiPath.match(/\{(\w+)\}/g);
                if (matches) {
                    matches.forEach(match => {
                        const paramName = match.replace('{', '').replace('}', '');
                        if (params[paramName]) {
                            url = url.replace(match, params[paramName]);
                            delete params[paramName];
                        }
                    });
                }
            }
            
            // 构建请求选项
            const options = {
                method: method,
                headers: {
                    'Content-Type': 'application/json'
                }
            };
            
            // 添加token
            if (token.value) {
                options.headers['Authorization'] = 'Bearer ' + token.value;
            }
            
            // 添加请求体
            if (method !== 'GET') {
                options.body = JSON.stringify(params);
            } else if (Object.keys(params).length > 0) {
                // 将GET参数添加到URL
                const queryParams = new URLSearchParams();
                for (const key in params) {
                    queryParams.append(key, params[key]);
                }
                url += '?' + queryParams.toString();
            }
            
            // 发送请求
            responseResult.textContent = '正在请求...';
            
            fetch(url, options)
                .then(response => response.json())
                .then(data => {
                    responseResult.textContent = JSON.stringify(data, null, 2);
                })
                .catch(error => {
                    responseResult.textContent = '请求错误: ' + error.message;
                });
        });
    </script>
</body>
</html> 